<template>
	<view class="container">
		<u-navbar title="置顶券">
			<view class="navbar-right" slot="right" v-on:click="navigateTomyticket()">
				<text>置顶券</text>
				<u-icon name="../../../static/navigate.png" color="rgba(135, 135, 135,0.8)" size="20px"></u-icon>
			</view>
		</u-navbar>
		<view class="ticketlist">
			<view class="ticketitem" v-for="item in 5">
				<view class="ticketimage">
					<view class="ticketterm">
						<text class="biaoti">一天名片置顶券</text>
						<text>找活更方便</text>
					</view>
				</view>
				<view class="ticketdata">
					<text class="name">一天名片置顶券</text>
					<view class="ticketbuy">
						<text class="price">{{price.toFixed(2)|addPricesign}}</text>
						<view v-on:click="openPaypopup()">
							<text>购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式-弹窗 -->
		<u-popup v-model="showPaypopup" mode="bottom"height="auto":closeable="true" close-icon="arrow-left"close-icon-pos="top-left" border-radius="20">
			<text class="paypopup-title">支付订单</text>
			<view class="buyorderinfo">
				<text class="orderprice">{{price.toFixed(2)|addPricesign}}</text>
				<text class="goodsname">{{'一天置顶券'}}</text>
			</view>
			<view class="paymethods">
				<text class="paymettitle">支付方式</text>
				<u-radio-group v-model="paymetvalue" active-color="#FF9D5D" icon-size="35">
					  <view class="paymethod" v-on:click="changePaymethod(0)">
					  	<view>
					  		<u-icon name="../../../static/icon_zfb_535.png" size="35"></u-icon>
					  		<text>支付宝</text>
					  	</view>
						<u-radio name="zfb"></u-radio>
					  </view>
					  <view class="paymethod" v-on:click="changePaymethod(1)">
					  	<view>
					  		<u-icon name="../../../static/icon_wx_543.png" size="35"></u-icon>
					  		<text>微信</text>
					  	</view>
						<u-radio name="wx"></u-radio>
					  </view>
				</u-radio-group>
			</view>
			<view class="confirmpay-btn">
				<text>确定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price:98,
				showPaypopup:false,
				paymetvalue:'zfb'
			}
		},
		methods: {
			openPaypopup(){
				this.showPaypopup=true;
			},
			changePaymethod(metindex){
				switch(metindex){
					case 0:
					   this.paymetvalue='zfb';
					   break;
					case 1:
					   this.paymetvalue='wx'
					   break;
					default:
					   break;
				}
			},
			navigateTomyticket(){
				uni.navigateTo({
					url:'./mytickets/mytickets'
				})
			}
		},
		filters:{
			addPricesign:function(val){
				return '￥'+val;
			}
		}
	}
</script>

<style lang="scss">
      page{
		  width: 100%;
		  height: 100%;
	  }
	  .container{
		  width: 100%;
		  min-height: 100%;
		  background-color: rgba(243, 247, 251, 1);
		  .navbar-right{
			  width: 90px;
			  height: 30px;
			  display: flex;
			  align-items: center;
			  font-size: 14px;
			  color: #212121;
			  background-color: rgba(135, 135, 135, 0.3);
			  justify-content: space-around;
			  border-radius: 30px;
			  text{
				  margin-left: 10px;
			  }
			  margin-right: 10px;
		  }
		  .ticketlist{
			  width: 710upx;
			  height: auto;
			  padding-bottom: 20upx;
			  margin: auto;
			  display: flex;
			  justify-content: space-between;
			  flex-wrap: wrap;
			  .ticketitem{
				  width: 345upx;
				  background-color: #FFFFFF;
				  height: auto;
				  border-radius: 20upx;
				  box-shadow: 10px 10px 5px #F1F1F1;
				  margin-top: 20upx;
				  padding-bottom: 20upx;
				  .ticketimage{
					  width: 300upx;
					  height: 120upx;
					  margin: auto;
					  background: url('~@/static/img_537.png') no-repeat;
					  background-size: 100% 100%;
					  margin-top: 60upx;
					  margin-bottom: 60upx;
					  .ticketterm{
						  width: 220upx;
						  height: 100%;
						  display: flex;
						  flex-direction: column;
						  justify-content: center;
						  align-items: center;
						  flex-wrap: wrap;
						  font-size: 21upx;
						  color: #FD3B00;
						  white-space:nowrap;
						  overflow:hidden;
						  text-overflow:ellipsis;
						  .biaoti{font-weight: bold;}
					  }
				  }
				  .ticketdata{
					  width: 300upx;
					  height: auto;
					  margin: auto;
					  .name{
						  color: #212121;
						  font-size: 30upx;
						  white-space:nowrap;
						  overflow:hidden;
						  text-overflow:ellipsis;
					  }
					  .ticketbuy{
						  display: flex;
						  justify-content: space-between;
						  margin-top: 20upx;
						  width: 100%;
						  height: auto;
						  .price{color: #FF0000;font-size: 30upx;}
						  view{border-radius: 30upx;background-color: #FF9D5D;color: #FFFFFF;font-size: 24upx;height: 40upx;width: 100upx;text-align: center;line-height: 40upx;}
					  }
				  }
			  }
		  }
		  .paypopup-title{
			  display: block;
			  width: 100%;
			  text-align: center;
			  line-height: 80upx;
			  font-size: 35upx;
		  }
		  .buyorderinfo{
			  width: 100%;
			  height: 300upx;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
		  }
		  .orderprice{
			 font-size: 60upx;
			 margin-bottom: 20upx;
		  }
		  .goodsname{
		     color: #212121;
			 font-size: 30upx;
			 margin-top: 20upx;
		  }
		  .paymethods{
			  width: 730upx;
			  margin: auto;
			  height: auto;
			  border-radius: 15upx;
			  background-color: #FFFFFF;
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  padding-bottom: 20upx;
			  .paymettitle{
			  	  color: #212121;
				  font-size: 30upx;
				  width: 710upx;
				  height: 70upx;
				  display: block;
				  line-height: 70upx;
			  }
			  .u-radio-group{
				  width: 710upx;
			  }
			  .paymethod{
				  width: 710upx;
				  height: 80upx;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  view{
					  height: 100%;
					  display: flex;
					  align-items: center;
					  text{margin-left: 20upx;}
				  }
			  }
		  }
		  .confirmpay-btn{
		  		  width: 710upx;
		  		  height: 90upx;
		  		  background-color: #19BE6B;
		  		  color: #FFFFFF;
		  		  font-size: 30upx;
		  		  display: flex;
		  		  justify-content: center;
		  		  align-items: center;
				  margin: auto;
				  margin-bottom: 40upx;
				  margin-top: 40upx;
				  border-radius: 10upx;
		  }
	  }
</style>
